import React, { useState, useRef } from "react";
import { ProTable } from "@ant-design/pro-components";
import { Button } from "antd";
import style from "./beneficiaryInformation.module.scss";
import AddInformationBeneficiaries from "../../components/AddInformationBeneficiaries";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import ViewBeneficiary from "../../components/ViewBeneficiary";

export default function BeneficiaryInformation() {
  const refData = localStorage.getItem("i18nextLng");
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const [open, setOpen] = useState(false);
  const [checkOpen, setCheckOpen] = useState(false);
  const [addflag, setAddflag] = useState();

  // 修改开关
  const showDrawer = () => {
    setOpen(true);
  };
  // 修改开关
  const onClose = (value) => {
    setOpen(value);
  };

  // 查看开关

  const showCheckDrawer = () => {
    setCheckOpen(true);
  };
  const onCheckClose = (value) => {
    setCheckOpen(value);
  };

  const columns = [
    {
      // title: "账户名称",
      title: () => <>{t("form.accountTitle")}</>,
      dataIndex: "applytitle",
      // hideInTable: true,
    },
    {
      // title: "银行卡号",
      title: () => <>{t("form.BankCardNo")}</>,
      dataIndex: "sehnqingdnahao",
    },

    {
      disable: true,
      // title: "受益人ID",
      title: () => <>{t("layout.BeneficiaryID")}</>,
      dataIndex: "benfnag",
      hideInSearch: true,
    },
    {
      disable: true,
      title: () => <>{t("layout.CustomerName")}</>,
      // title: "客户名称",
      dataIndex: "duifang",
      hideInSearch: true,
    },
    {
      disable: true,
      // title: "账户币种",
      title: () => <>{t("form.AccountCurrency")}</>,
      dataIndex: "maichu",
      hideInSearch: true,
    },
    {
      disable: true,
      // title: "银行名称",
      title: () => <>{t("form.Bankname")}</>,
      dataIndex: "mairu",
      hideInSearch: true,
    },
    {
      disable: true,
      // title: "状态",
      title: () => <>{t("form.State")}</>,
      dataIndex: "state",
      valueType: "select",
    },

    {
      disable: true,
      // title: "状态说明",
      title: () => <>{t("form.StatusDescription")}</>,
      dataIndex: "yuanyinshuom",
      hideInSearch: true,
    },

    {
      // title: "操作",
      title: () => <>{t("form.Option")}</>,
      valueType: "option",
      key: "option",
      render: (text, record, _, action) => {
        return (
          <>
            <Button
              size="small"
              type="link"
              onClick={() => {
                showCheckDrawer();
              }}
            >
              {/* 详情 */}
              {t("buttons.Details")}
            </Button>
            <Button
              size="small"
              type="link"
              onClick={() => {
                showDrawer();
                setAddflag(2);
              }}
            >
              {/* 修改 */}
              {t("buttons.Modify")}
            </Button>
            <Button size="small" type="link">
              {/* 删除 */}
              {t("buttons.Delete")}
            </Button>
          </>
        );
      },
    },
  ];
  const actionRef = useRef();
  return (
    <div className={style.ApplicationResultBoss}>
      <AddInformationBeneficiaries
        addflag={addflag}
        open={open}
        showDrawer={showDrawer}
        onClose={onClose}
      />

      <ViewBeneficiary
        checkOpen={checkOpen}
        showCheckDrawer={showCheckDrawer}
        onCheckClose={onCheckClose}
      />
      <ProTable
        style={{ height: "100%" }}
        scroll={{ x: 1000 }}
        columns={columns}
        actionRef={actionRef}
        cardBordered
        form={{ labelWrap: true }}
        request={async (params = {}, sort, filter) => {
          console.log("params", params, "sort", sort, "filter", filter);

          const data = [
            {
              id: 1,
              shanghao: "11",
              applytitle: "1212121",
            },
            {
              id: 2,
              shanghao: "22",
              maichu: "121312",
            },
            {
              id: 3,
              shanghao: "22",
              maichu: "速度输出",
            },
            {
              id: 4,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
            {
              id: 44,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
            {
              id: 432,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
            {
              id: 42,
              shanghao: "22",
              maichu: "暗杀就此结束进程",
            },
          ];

          return {
            data: data,
          };
        }}
        search={{
          labelWidth: 90,
          // span: 12,
          optionRender: ({ searchText, resetText }, { form }, dom) => [
            <Button
              key="searchText"
              type="primary"
              onClick={() => {
                form?.submit();
              }}
            >
              {t("buttons.query")}
            </Button>,
            <Button
              key="resetText"
              onClick={() => {
                form?.resetFields();
              }}
            >
              {t("buttons.Reset")}
            </Button>,
          ],
          collapseRender: (collapsed, showCollapseButton) => {
            return collapsed ? (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 展开 */}
                {t("buttons.Open")}
              </Button>
            ) : (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 关闭 */}
                {t("buttons.Close")}
              </Button>
            );
          },
        }}
        rowKey="id"
        options={false}
        pagination={{
          pageSize: 10,
          onChange: (page) => console.log(page),
        }}
        // headerTitle="高级表格"
        defaultSize="small"
        toolBarRender={() => [
          <Button
            key="button"
            type="primary"
            onClick={() => {
              showDrawer();
              setAddflag(1);
            }}
          >
            {/* 新增 */}
            {t("buttons.Add")}
          </Button>,
          <Button key="button" type="primary">
            {/* 导出 */}
            {t("buttons.Export")}
          </Button>,
        ]}
      />
    </div>
  );
}
